<template>
   <el-container class="container">
     <!-- 顶部栏 -->
  <el-header>
    <div class="header">
      <img src="~assets/img/home/logo.jpg">
      <span>电商管理系统</span>
    </div>
       <el-button @click='clearn' type="info">退出</el-button>
  </el-header>
  <!-- 侧边栏 -->
  <el-container>
    <el-aside :width="iscollapse ? '64px':'230px'">
      
     <el-menu    
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#409eff"
      unique-opened
      :collapse='iscollapse'
      :collapse-transition='false'
      router
      :default-active='isactivepath'
      >
      <div class="togget" @click="togget">|&nbsp;|&nbsp;|</div>
      <el-submenu :index="item.id.toString()" v-for="item in leftmenulisten" :key="item.id">
        <template slot="title">
          <i :class="fonticonlist[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item-group v-for="subitem in item.children" :key="subitem.id">
          <el-menu-item :index="'/'+subitem.path" @click="activepath('/'+subitem.path)">
          <template slot="title">
            <i class="el-icon-menu"></i>
           <span>{{subitem.authName}}</span> 
          </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

  
</template>

<script>
  export default {
    name:'home',
    data(){
      return{
        leftmenulisten:[],
        fonticonlist:{
          '125':'iconfont icon-yonghuguanli',
          '103':'iconfont icon-quanxianguanli',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-dingdan',
          '145':'iconfont icon-shujutongji'
        },
        iscollapse:false,
        isactivepath:''
      }
    },
    methods: {
      clearn(){
      window.sessionStorage.clear('token')
      this.$router.push('/longin')
     },
      async getleftmenu() {
        let res= await this.$http.get('menus')
        // console.log(res.data.data)
        if(res.data.meta.status !==200){
        return   this.$message({showClose: true,message: `获取左侧裂变失败`,type: 'error'})
        }
        this.leftmenulisten=res.data.data
      },
      togget(){
      this.iscollapse=!this.iscollapse
      },
      activepath(active){
      window.sessionStorage.setItem('active',active)
      this.isactivepath=window.sessionStorage.getItem('active')
      }
    },
    created () {
      this.getleftmenu()
      this.activepath()
    }
  }
</script>

<style lang="less" scoped>
.container{
  height: 100vh;
}
 .el-header{
   background-color: rgba(0, 0, 0,.8);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 0px;
 }
 .el-aside {
   background-color: #333744;
 }
 .el-main{
   background-color: #EAEDF1;
   border-right:none
 }
 .header{
   display: flex;
   align-items: center;
   color: #fff;
   font-size: 19px;
   font-weight: bold;
   img{
     width: 60px;
     height: 60px;
     background-size: 100% 100%;
     border-radius: 50%;
   }
   span{
     margin-left: 10px;
   }
 }
 .menu{
    background-color: #333744;
    color: #fff;
 }
 .iconfont{
   margin-right: 10px;
 }
.togget{
  text-align: center;
  font-size: 19px;
  color: #fff;
  line-height: 24px;
  background-color: royalblue;
}
</style>